<template>
  <div class="mat-pane">
    <book-detail v-if="isBook" :mat="mat" @select="select" @click-title="$emit('click-title', $event)"></book-detail>
    <code-detail v-else-if="isCode" :mat="mat" @select="select" @click-title="$emit('click-title', $event)"></code-detail>
    <poem-detail v-else-if="isPoem" :mat="mat" @select="select" @click-title="$emit('click-title', $event)"></poem-detail>
    <div v-else>
      <div class="mat-title-pane">
        <span>
          <ri i="list" @click="goBack()"></ri>
        </span>
        <span class="mat-title" @click="onTitle">
          {{ mat.title }}
        </span>
        <span class="author">
          <a :href="'/#/people/view/' + mat.author">{{ mat.author }}</a>
        </span>
        <span class="mat-stats">
          <star :star="star"></star>
        </span>
      </div>
      <div class="mat-content">
        <mat-content :mat="mat" :content="mat.content" @select="select"></mat-content>
      </div>
    </div>
  </div>
</template>

<script>

import { MatKind }  from "@js/constants.js";
import BookDetail from "./BookDetail.vue";
import CodeDetail from "./CodeDetail.vue";
import PoemDetail from "./PoemDetail.vue";
import MatContent from "../content/MatContent.vue";
import Star from "@tools/Star.vue";
export default {
  props: ["mat"],
  components: {
    BookDetail,
    CodeDetail,
    PoemDetail,
    MatContent,
    Star,
  },
  data() {
    return {
      star: {}
    }
  },
  computed: {
    isBook() {
      return this.mat.kind == MatKind.Book;
    },
    isCode() {
      let codeKinds = [MatKind.Project, MatKind.Dir, MatKind.File];
      return codeKinds.includes(this.mat.kind);
    },
    isPoem() {
      return this.mat.kind == MatKind.Poem;
    },
    isArticleSet() {
      return this.mat.kind == MatKind.ArticleSet;
    }
  },
  methods: {
    onTitle() {
      this.$emit('click-title', {})
    },
    select(e) {
      this.$emit('select', e)
    },
    goBack() {
      this.$router.go(-1);
    }
    
  }
};

</script>